<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object.defineProperty</title>
</head>
<body>
    
<!-- defineProperty方法只能监听到读取和修改，因此vue2添加和删除属性不是响应式的 -->

    <script>
        let number=18;
        let person = {
            name : '张三',
            age : 18,
        }

        // //模拟vue2的响应式原理
        // Object.defineProperty(person,'age',{
        //     //当有人读取person的age属性时，get(getter)函数就会被调用,且返回值就是age的值。
        //     get(){
        //         console.log('有人读取age属性值了');
        //         return number;
        //     },
        //     //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值。
        //         set(value){
        //             console.log('有人修改了age属性值,且值为',value);
        //             number=value;
        //         }
        // })
       
       
        //模拟vue3的响应式原理 Proxy+Reflect
        const p = new Proxy(person,{
            //读取属性
            get(target,propName){
                console.log("有人读取了person的属性",propName);
                return Reflect.get(target,propName) ;
            },
            //修改和添加属性
            set(target,propName,value){
                console.log('有人修改了person的属性',propName);
                return Reflect.set(target,propName,value);
            },
            //删除属性
            deleteProperty(target,propName){
                console.log("有人删除了person的属性",propName);
                return Reflect.deleteProperty(target,propName);
            }
        })
            
        
    </script>
</body>
</html>